<template>
  <div>
    <Row>
      <Col span="6">
        <org-tree></org-tree>
      </Col>
      <div class="lz-splite"></div>
      <Col span="18">
        <Card>
          <Row :gutter="16" style="display: flex;">
            <Col>
              <Button type="primary" @click="addUser()">
                <Icon type="md-add"/>
                添加
              </Button>
            </Col>
            <Col>
              <Button type="primary" @click="addUserToRole(selectUserList[0])">
                <Icon type="md-person"/>
                角色授权
              </Button>
            </Col>
          </Row>
        </Card>
        <Card>

<!--          创建用户弹框-->
          <user-add ref="userModal" :reloadData="reloadData"></user-add>

          <!--分配角色弹框-->
          <allot-user-role ref="allotUserRoleModal"></allot-user-role>
          <Table border
                 :columns="columns"
                 :data="userList"
                 @on-selection-change="selectUser">
            <template slot-scope="{ row,index }" slot="name">
              <strong>{{ row.name }}</strong>
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <Button type="primary" size="small" style="margin-right: 5px" @click="edit(row,index)">编辑</Button>
              <Button type="error" size="small" @click="deleteData(row,index)">删除</Button>
            </template>
          </Table>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
  import {getUserList, deleteUser} from '@/api/base-manage/user'
  import userAdd from './user-add'
  import orgTree from '../components/org-tree'
  import AllotUserRole from './allot-user-role'


  export default {
    name: 'user_manage',
    components: {
      orgTree,
      userAdd,
      AllotUserRole
    },
    data() {
      return {
        treeSelected: [112, 113],
        userList: [{name: 'lize'}, {name: 'hh'}],
        is_userAdd: false,
        selectUserList: '',
        columns: [{
          type: 'selection',
          width: 60,
          align: 'center'
        }, {
          title: '姓名',
          key: 'name',
          slot: 'name',
          sortable: true
        },
          {
            title: '年龄',
            key: 'age',
            sortable: true
          },
          {
            title: '性别',
            key: 'sex',
            sortable: false,
            render(h, params) {
              switch (params.row.sex) {
                case 1:
                  return h('span', {}, '男');
                  break;
                case 2:
                  return h('span', {}, '女');
                  break;

                case 3:
                  return h('span', {}, '未知');
                  break;

              }
            }
          },
          {
            title: '操作',
            key: 'action',
            slot: 'action'
          }

        ]

      }
    },
    mounted() {
      this.reloadData();
    },
    methods: {
      reloadData() {
        getUserList().then(res => {
          this.userList = res.data;
          console.log(res)
        })
      },
      deleteData(row, index) {
        deleteUser({
          id: row.id
        }).then(res => {
          console.log(res);
          if (res.data.success) {
            this.$Message.success('删除成功');
            this.reloadData();
          } else {
            this.$Message.error('删除失败');

          }
        })
      },
      edit(row, index) {
        this.$refs.userModal.show()
        this.$refs.userModal.initData(row)
      },
      addUser() {
        this.$refs.userModal.show();
        this.$refs.userModal.initData()
      },
      addUserToRole(row) {
        if(this.selectUserList.length==0){
          this.$Message.warning('请至少选择一个用户');
          return
        }
        if(this.selectUserList.length>1){
          this.$Message.warning('只能对单个用户授权角色');
          return
        }
        this.$refs.allotUserRoleModal.show(row);
        console.log('1111111');
      },
      selectUser(list){
        this.selectUserList = list;
      }
    }
  }
</script>

<style>
  /*.left-modal {*/
  /*  display: flex;*/
  /*  align-items: center;*/
  /*  justify-content: center;*/
  /*  color: red;*/
  /*}*/
</style>
